<template>
    <div class="upCopperCont">
        <div class="formVal headImg">
            <div v-if="!headImg" class="iconfont icon-shangchuan upImg"></div>
            <img v-if="headImg" :src="headImg" />
            <input accept="image/*" ref="file" type="file" @change="onFileChange($event)" />
            <div v-if="headImg" class="iconfont icon-shangchuan upIcon"></div>
        </div>
        <el-dialog
            @opened="onDialogOpened"
            @close="cancelFn"
            :show-close="false"
            width="600px"
            :append-to-body="true"
            title="图片裁剪"
            :visible.sync="dialogVisible">
            <div class="preview-image-wrap">
                <img ref="preview-image" class="preview-image" :src="previewImage" alt="">
            </div>
            <div class="ImgCtrlBtn">
              <el-button class="canceBtn" @click="cancelFn">取消</el-button>
              <btn value="确认" @click="onUpdatePhoto"></btn>
            </div>
        </el-dialog>
    </div>
  </template>
  
  <script>
    import 'cropperjs/dist/cropper.css'
    import Cropper from 'cropperjs'
    import btn from '@/components/public/btn.vue'
    export default {
      components: {btn},
      data() {
        return {
          previewImage:'',
          dialogVisible:false,
          imgArr:[
            {img:''}
          ],
          headImg:this.propImg,
          upImgLoad:false,
        }
      },
      props: {
        propImg:String,
        imgIndex:Number,
      },
      
      methods:{
        cancelFn(){
            this.dialogVisible = false
            this.cropper.destroy();
            this.previewImage= ''
            this.$refs.file.value = ''
        },
        onFileChange(e){
            let file = e.target.files[0]
            let blobData = window.URL.createObjectURL(file)
            this.previewImage = blobData
            this.dialogVisible = true
            // 解决选择相同图片不触发change事件的问题
            this.$refs.file.value = ''
        },
          
        onUpdatePhoto(){
          if(!this.upImgLoad){
            this.cropper.getCroppedCanvas().toBlob(file => {
              let formData = new FormData();// 可以增加表单数据
              formData.append("file",file);
              this.upImgLoad = true
              const loading = this.$loading({
                    lock: true,
                    text: '上传中,请耐心等待~',
                    spinner: 'el-icon-loading',
                    background: 'rgba(255, 255, 255, 0.7)'
                });
              $.ajax({
                url:this.apis+'/common/Upload/UpImg',
                dataType:"json",
                type:'post',
                processData : false,
                contentType : false,
                data:formData,
                success:(res)=>{
                  if(res.code==1){
                    let data = res.data.src
                    if(this.imgIndex||this.imgIndex==0){
                      data = {
                        src:res.data.src,
                        index:this.imgIndex
                      }
                    }
                    this.$emit('successCropper',data)
                    this.previewImage =res.data.src
                    this.headImg = res.data.src
                    this.dialogVisible = false
                    this.cropper.destroy();
                  }else{
                    this.$message(res.msg)
                  }
                  this.upImgLoad = false
                  loading.close();
                },
                error:(res)=>{
                  loading.close();
                  this.upImgLoad = false
                  this.$message('上传超时')
                }
              })
            })
          }
          },
        
        onDialogOpened(){
          let image = this.$refs['preview-image']
          let cropper = new Cropper(image, {
            aspectRatio: 1 / 1,// 裁剪框比列  1/1 长与宽的比列  NaN:任意比列
            viewMode: 1,// 0:对裁剪框的移动没有限制  1:裁剪框不能超过图片//2:裁剪框不能超过图片且图片高度和阴影背景高度一样  3:让图片完全填充阴影背景
            dragMode: 'none',
            zoomOnTouch : true,//是否可以通过触摸的形式来去放大图片(手机端)
            zoomable : true,//是否允许缩放图片
            autoCropArea:0.8,//当初始化时，裁剪框的大小与原图的比例
            background: true,//是否显示网格背景
            center : true,//裁剪框是否在图片的中心
            cropBoxResizable: true,//是否可以调节裁剪框的大小
          })
          this.cropper = cropper
        },
      },
      mounted(){
        
      },
      created() {
      },
    }
  </script>
  
  <style scoped lang="less">
  .headImg{
        width: 120px;
        height: 120px;
        border-radius: 5px;
        background-color: #f7f8fa;
        position: relative;
        margin-bottom: 20px;
        .upIcon{
            position: absolute;
            bottom: 0;
            right: 0;
            font-size: 18px;
            color: #fff;
            width: 30px;
            height: 30px;
            background-color: black;
            text-align: center;
            line-height: 30px;
            border-radius: 15px 0px 0 0;
        }
        input{
            width: 100%;
            height: 100%;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
        }
        .upImg{
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 120px;
            font-size: 40px;
            // color: #dcdee0;
            color: #ccc;
        }
        img{
            width: 100%;
        }
    }
    
  </style>
    <style scoped lang="less">
    .preview-image-wrap{
        width: 100%;
        background-color: #fff;
        height: 310px;
        .preview-image {
            display: block;
            max-width: 100%;
            // height: 300px;
        }
    }
    .el-dialog__body{
        padding: 10px 20px;
    }
    .imgTipLoad{
      margin: 15px 0;
    }
    .ImgCtrlBtn{
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-top: 15px;
        .elBtnItem{
        }
        .canceBtn{
            margin-right: 15px;
        }
    }
  </style>
  